.modal-root{
    :global .ant-modal-content{
        padding: 0;
        overflow: hidden;
    }

    .container{
        position: relative;
        min-width: 200px;
        min-height: 300px;
        // max-width: 390px;
        overflow: hidden;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        canvas{
            width: 100%;
            height: 100%;
        }

        .avatar{
            position: absolute;
            left: 24px;
            top: 56px;
            width: 56px;
            height: 56px;
            border: 2px solid #fff;
            border-radius: 50%;
            overflow: hidden;
            z-index: 99;

            img{
                width: 100%;
                height: 100%;
            }
        }

        .username{
            position: absolute;
            left: 24px;
            top: 56px;
            left: 94px;
            color: #fff;
            font-weight: bold;
            font-size: 16px;
            z-index: 99;
        }

        .qrcode{
            position: absolute;
            left: 56px;
            bottom: 96px;
            width: 96px;
            height: 96px;
            background-color: #efefef;
            align-items: center;
            justify-content: center;
            z-index: 99;

            img{
                width: 100%;
                height: 100%;
            }
        }

        & > img{
            width: 100%;
            height: 100%;
            z-index: 98;
            position: relative;
        }
    }

    .image{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        img{
            width: 100%;
            vertical-align: middle;
        }
    }
    .footer{
        position: relative;
        text-align: center;
        margin: 12px 0;
    }
}